<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="topBar">
			<view>
				<uni-nav-bar @clickLeft="back" height="50px" backgroundColor="#3284fc" left-icon="left" :border="false"
					leftText="返回" rightText="设置" title="选择车辆" color="#fff" />
			</view>

			<!-- 选择车辆信息 -->
			<view class="Info">
				<uni-card class="card1">
					<view class="contentItem">
						<view class="infos1">
							<u--image width="70px" height="70px" src="https://cdn.uviewui.com/uview/album/1.jpg"
								shape="circle"></u--image>
							<view style="width: 250rpx; margin-left: -70rpx;">
								<view style="color: black; font-size: 36rpx;font-weight: 700;">车型: 奔驰-GR</view>
								<view style="color: black; font-size: 30rpx;">车牌: 豫M3589</view>
							</view>
							<view>
								<uni-section title="">
									<view class="uni-px-5 uni-pb-5">
										<uni-data-checkbox multiple v-model="checkbox1"
											:localdata="car"></uni-data-checkbox>
									</view>
								</uni-section>
							</view>
						</view>
					</view>
				</uni-card>
			</view>

			<!-- 选择车辆信息 -->
			<view class="Info">
				<uni-card class="card1">
					<view class="contentItem">
						<view class="infos1">
							<u--image width="70px" height="70px" src="https://cdn.uviewui.com/uview/album/1.jpg"
								shape="circle"></u--image>
							<view style="width: 250rpx; margin-left: -70rpx;">
								<view style="color: black; font-size: 36rpx;font-weight: 700;">车型: 奔驰-GR</view>
								<view style="color: black; font-size: 30rpx;">车牌: 豫M3589</view>
							</view>
							<view>
								<uni-section title="">
									<view class="uni-px-5 uni-pb-5">
										<uni-data-checkbox multiple v-model="checkbox2"
											:localdata="car2"></uni-data-checkbox>
									</view>
								</uni-section>
							</view>
						</view>
					</view>
				</uni-card>
			</view>

			<!-- 添加车辆 -->
			<view class="addCar">
				<button @click="toAdd" class="btn">+ 添加车辆</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '李四',
				age: 23,
				checkbox1: [],
				car: [{
					text: '',
					value: 0
				}],
				checkbox2: [],
				car2: [{
					text: '',
					value: 0
				}],
			}
		},
		methods: {
			back() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			toAdd() {
				// 跳转页面 + 传参
				uni.navigateTo({
					url: `/pages/coupon/coupon?name=${this.name}&age=${this.age}`,
				})
			}
		}
	}
</script>

<style>
	.addCar .btn {
		position: absolute;
		width: 650rpx;
		background-color: lightskyblue;
		border-radius: 100rpx;
		color: #fff;
		text-align: center;
		height: 80rpx;
		top: 10%;
		left: 7%;

	}

	.addCar {
		position: relative;
		margin-top: 574rpx;
		height: 100rpx;
		background-color: #fff;
	}

	.Info {
		margin-bottom: 60rpx;
	}

	.contentItem .infos1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 680rpx;
		margin: 30rpx auto;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}

	.card1 {
		border-radius: 30rpx;
		height: 230rpx;
	}

	.topBar {
		background-color: #3284fc;
		width: 750rpx;
		height: 400rpx;
	}
</style>